<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Babylon.js Hollow Arrow Example</title>
    <!-- 引入 Babylon.js 库 -->
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        // 创建场景
        const canvas = document.getElementById('renderCanvas');
        const engine = new BABYLON.Engine(canvas, true);
        
        const createScene = function() {
            const scene = new BABYLON.Scene(engine);
            const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);
            
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;
            
            // 创建 GUI 界面
            const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
			
			

			const rect = new BABYLON.GUI.Rectangle();
			rect.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
			rect.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
			rect.thinkness=1;
			rect.color='white';
			rect.left=60;
			rect.top=80;
			rect.width=100+'px';
			rect.height=100+'px';
			
			var textBlock = new BABYLON.GUI.TextBlock();
			textBlock.text = '🏀⇧⇳d';
			textBlock.color = 'white';
			textBlock.fontFamily = 'arial';
			textBlock.fontSize = 26;
			rect.addControl(textBlock);

			var x = rect.leftInPixels +rect.widthInPixels / 2;
			var y = rect.topInPixels +rect.heightInPixels / 2;
			var w = rect.widthInPixels / 2;
			const arrow1 = createDoubleArrow(x,y, w, w);
			//arrow1.rotation = Math.PI; // 旋转180度
			rect.addControl(arrow1);
			advancedTexture.addControl(rect);
			
            // 创建单向箭头的方法 - 修正了语法错误
            function createArrow(x, y, w, h) {
                var arrow = new BABYLON.GUI.MultiLine();
                arrow.add(
                  { x: x, y: y - h * 0.5 },
                  { x: x + w * 0.3, y: y - h * 0.5 },
                  { x: x + w * 0.3, y: y },
                  { x: x + w * 0.5, y: y },
                  { x: x, y: y + h * 0.5 },
                  { x: x - w * 0.5, y: y },
                  { x: x - w * 0.3, y: y },
                  { x: x - w * 0.3, y: y - h * 0.5 },
                  { x: x, y: y - h * 0.5 },
                );
                return arrow;
            }
            
            // 创建双向箭头的方法
            function createDoubleArrow(x, y, w, h) {
                var arrow = new BABYLON.GUI.MultiLine();
                arrow.add(
      { x: x, y: y - h * 0.5 },
      { x: x + w * 0.5, y: y - h * 0.5 * 0.5 },
      { x: x + w * 0.3, y: y - h * 0.5 * 0.5 },
      { x: x + w * 0.3, y: y + h * 0.5 * 0.5 },
      { x: x + w * 0.5, y: y + h * 0.5 * 0.5 },
      { x: x, y: y + h * 0.5 },

      { x: x - w * 0.5, y: y + h * 0.5 * 0.5 },
      { x: x - w * 0.3, y: y + h * 0.5 * 0.5 },
      { x: x - w * 0.3, y: y - h * 0.5 * 0.5 },
      { x: x - w * 0.5, y: y - h * 0.5 * 0.5 },
      { x: x, y: y - h * 0.5 },
                );
                return arrow;
            }
            return scene;
        };
        
        const scene = createScene();
        
        // 渲染循环
        engine.runRenderLoop(function() {
            scene.render();
        });
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            engine.resize();
        });
    </script>
</body>
</html>    